<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自定义复选框</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        width: 150px;
        margin:0 auto;
        font-weight: bolder;
    }
    input[type='checkbox']{
        opacity: 0;
    }
    input[type='checkbox']+label::before{
        content: "\a0";
        width: 11px;
        height: 11px;
        border: 1px solid #111;
        display: inline-block;  /* 设置了宽高才生效 */
        border-radius: 3px;
        /* vertical-align: -4px;  对齐 */
        line-height: 13px;
        margin-left: -19px;
    }
    input[type='checkbox']:checked+label::before{
        content: "\2713";
        background-color: olivedrab;
    }
    input[type='checkbox']:focus+label::before{
        box-shadow: 0 0 4px 4px #ccc;
    }
    input[type='checkbox']:disabled+label::before{
        background-color: slategrey;
        box-shadow:none;
    }
</style>

<body>
    <div class="box">
        <input type="checkbox" name="" id="checkbox">
        <label for="checkbox"></label>
        <input type="checkbox" name="" id="checkbox1" disabled>
        <label for="checkbox1"></label>
    </div>
</body>
<script>
</script>
</html>